為何使用

當 website 逐漸變大之後，隨之會使用到的同步非同步方法也會變多，需要在 Vuex 管理的變數也會變多。
這勢必會讓 store.js 檔案變的雜亂、龐大、難以管理。
為了解決這個問題，將 store.js 的內容 切割成多隻檔案，在用 store.js 做引用。

Vue-Cli 模板範例

Github Repo Link

Vuex 特性 必須注意!!

• states 屬於 模組內 區域變數
• mutation, action, getter 屬於全域變數 (同名會衝突，所以要用namespaced)

store.js Setup

• store.js 內亦可撰寫 state,mutation,actions

• 注意! 寫於 store.js 與 modules 的 state,mutations,actions 在元件中使用時的方法會不太相同

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

// 引入切割出來的內容，個人 開了一個 store 的資料夾用來存放 Vuex 相關的檔案
import exampleApi from './store/api/exampleApi'

export default new Vuex.Store({
  modules: {
    // 載入該模塊
    exampleApi,
  },
  getters: {},
  state: {
    // 全域使用的才寫這裡
    rootTest: 'rootTest',
  },
  // actions & mutation 首變數為 context 勿省略，次變數為 data 多參傳物件 { }
  mutations: {},
  actions: {
    // getUsers(context, data){ context.commit('mutationName', data ) }
  },
  strict: process.env.NODE_ENV !== 'production',
})

元件內使用

1. 先 import vuex
2. 全域的引用 & Modules (有設定 namespaced的) 寫法有些差異

import { mapState, mapActions, mapMutations } from 'vuex'
// 全域的引用用此
...mapState(['rootTest']),
// Modules 用此寫法
...mapState('testTemplate', ['test']),

Module Vuex 檔案範例

• namespaced: true 必加，因為 mutation, action, getter 屬於全域變數會造成衝突
• 注意 Module 的 Vuex export 為 單純的物件!!!!

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default {
  namespaced: true, // 必加避免衝突
  getters: {},
  state: {
    rootTest: 'rootTest',
  },
  mutations: {},
  actions: {
    // getUsers(context, data){ context.commit('mutationName', data ) }
  },
  strict: process.env.NODE_ENV !== 'production',
}

參考資料

Vuex 模組化
Vuex 專案範例
Vuex 模組化(精)